<template>
  <!--用柱状图展示消费额最低的省份-->
  <div id="getAmountLowProvince" :style="{ width: '800px', height: '400px' }"></div>
</template>

<script>

import axios from 'axios'
import * as echarts from 'echarts'

export default {
  name: "getAmountLowProvince",

  setup() {

    axios(
        {
          method: 'get',
          url: 'http://139.198.108.127:8080/get/low-amount-province'
        }
    ).then((res) => {
      const  data = res.data.data
      console.log(data)
      const dom = document.getElementById('getAmountLowProvince');
      const myChart = echarts.init(dom); // 初始化echarts实例
      var provinceNames = []
      var amountS = []
      data.forEach((item) => {
        provinceNames.push(item.province_name);
        amountS.push(item.total_amount)
      })
      var option = {
        xAxis: {
          type: 'category',
          data: provinceNames
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: amountS,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    })
  }
}
</script>

<style scoped>

</style>